Make confirm popup for adult consent #2419

SleeplessOne1917 · 2024-04-12T03:41:45Z

Makes UI for a backend change. This isn't fully complete because there are more things that I need to clarify.

How should the content_warning site setting interact with the enable_nsfw site setting? I assume that content_warning should not be able to have a value when enable_nsfw is off. However, if I understand correctly, having enable_nsfw set to true while content_warning is blank still blurs nsfw images by default, while the blurring is disabled if a content_warning is set. I think it's pretty unintuitive, since the relation between the content warning and post blurring is not clear from just looking at the settings.

One idea I have around this is including a blurb explaining this, though I imagine there are better alternatives and I want to know if anyone thinks of any.

Another thing I noticed is that the user settings for showing nsfw and blurring nsfw are visible even when the site has enable_nsfw set to false. The option for blurring nsfw is also able to be changed independently of showing nsfw, which seems wrong.

Besides the stuff above, what I have left with this is:

Add UI to site form
Add translations

I'll get those 2 parts done once the other stuff is hashed out.

SleeplessOne1917 · 2024-04-12T03:59:10Z

src/shared/components/app/app.tsx

+      if (confirm(siteRes.site_view.site.content_warning)) {
+        localStorage.setItem(adultConsentLocalStorageKey, "true");
+      } else {
+        history.back();


Should I include an alert like lemmy nsfw does?

Yeah I think so. It doesn't have to be a javascript::alert like theirs, but that would probably have the best compatibility. I'd probably prefer a proper modal tho, so that we can markdown render the content warning.

The most important thing is that the site behind the alert is hidden until they click a let me in button.

dessalines · 2024-04-12T13:50:31Z

I assume that content_warning should not be able to have a value when enable_nsfw is off.

Seems correct to me, maybe hide the content_warning field if enable_nsfw = false.

However, if I understand correctly, having enable_nsfw set to true while content_warning is blank still blurs nsfw images by default, while the blurring is disabled if a content_warning is set. I think it's pretty unintuitive, since the relation between the content warning and post blurring is not clear from just looking at the settings.

I suppose content_warning is a rare override, that should disable all blurring and nsfw settings. As long as the nsfw check is extracted to a function that takes these into account, it shouldn't be too difficult.

One idea I have around this is including a blurb explaining this, though I imagine there are better alternatives and I want to know if anyone thinks of any.

I wouldn't worry about that, its up to the server-runners to put that in their content_warning if they wish.

Another thing I noticed is that the user settings for showing nsfw and blurring nsfw are visible even when the site has enable_nsfw set to false. The option for blurring nsfw is also able to be changed independently of showing nsfw, which seems wrong.

That could also be fixed here, if you'd like. We could hide those user settings fields because they're pointless if the site doesn't allow NSFW.

SleeplessOne1917 · 2024-04-12T14:00:09Z

I suppose content_warning is a rare override, that should disable all blurring and nsfw settings. As long as the nsfw check is extracted to a function that takes these into account, it shouldn't be too difficult.

The logic sounds good. The other half of the problem is communicating this to the user in an effective way. While I assume an instance admin should be at least somewhat familiar with the docs, I'd rather try to avoid that with UX design.

One idea I have around this is including a blurb explaining this, though I imagine there are better alternatives and I want to know if anyone thinks of any.

I wouldn't worry about that, its up to the server-runners to put that in their content_warning if they wish.

In this case, I'm not talking about notifying the users about that. I'm talking about making it clear on the site settings UI that admins use.

Everything else you said sounds good and I'll get to work on it.

…into content-warning

SleeplessOne1917 · 2024-04-14T14:31:29Z

I'm almost done with this issue. The only thing left is making translations. If reviewers are good with the verbiage I picked, I'll make the translations PR.

Here is what the section of the admin settings looks like:

I recorded some videos of the popup, but github is being dumb and won't let me upload them.

Nutomic · 2024-04-15T10:08:17Z

How should the content_warning site setting interact with the enable_nsfw site setting?

enable_nsfw is only used in the backend to disable thumbnail generation for nsfw posts. I suppose we could get rid of that value and instead check if content_warning exists to generate nsfw thumbnails. But that would be a breaking change. So for now we can mark enable_nsfw as deprecated.

LemmyNet/lemmy#4627

SleeplessOne1917 · 2024-04-15T11:30:33Z

Since enable_nsfw is going to be deprecated, do you want me to remove the option from the admin settings page? Or should I wait until it's phased out for good?

Nutomic · 2024-04-15T12:38:53Z

So far the setting is still in use, so it doesnt make sense to remove it yet.

dessalines

Tested, but IMO the modal should hide (or blur) everything in the background, and might need some re-thinking to make that work.

Even if you set every picture to blur, there could still be some things like large offensive text you wouldn't want anyone going to this site for the first time to see.

The strings you made seem fine to me, so you can i18n them whenever.

Nutomic · 2024-04-16T09:18:11Z

Im not sure how lemmynsfw.com is doing it, somehow they are hiding the page entirely while the popup is showing. Maybe you can figure it out from their code.

main...lemmynsfw:lemmy-ui:main

SleeplessOne1917 · 2024-04-16T13:46:04Z

I figured out the blur:

@dessalines @Nutomic With the blur and translations done, this should be good to merge.

dessalines · 2024-04-16T14:05:06Z

Its still showing the site for a second or so:

Screen_Recording_20240416_100259_Kiwi.Browser.mp4

dessalines

Its faster, but still like 100-200ms for me. Would probably be good to try it another way: let the site render, with a default invisible class, that gets removed after the content warning passes.

dessalines · 2024-04-16T22:38:05Z

src/shared/components/app/app.tsx

+        {contentWarning && (
+          <AdultConsentModal contentWarning={contentWarning} />
+        )}
+        <AppForwardRef ref={this.rootRef} />


Why not just set an invisible class depending on the contentWarning?

Currently I handle the blur by setting the background-filter for the top level of the modal element. I've tried doing it by putting a class on app, but that always ended up blurring out the modal as well. Another approach I tried was just having all of the lifecycle methods and event handlers be handled in the original top-level App component. This seemed to work, but would cause the loading skeleton to flash in the blurred background each second the redirect time counts down.

I'm going to see if I can handle this all at the very top level componentDidRoute. I strongly suspect the issue is due to the order rendering is done in. Before my most recent change, the logic for showing the modal didn't run until after the top level App component mounted and rendered. In the current iteration, componentDidMount for the consent modal is being called simultaneously with the componentDidMount for the App component. I think moving this logic to the very root of the component tree as a parent of App should solve the issue.

Cool. If all else fails we might have to just resort to a simple confirm dialog on the SSR like lemmynsfw does it.

In the current iteration, componentDidMount for the consent modal is being called simultaneously with the componentDidMount for the App component.

setState in componentWillMount will affect the first render of the component. It gets called on the server too.

To avoid ever showing the wrongly un/blurred version after a page refresh, you'd probably need a create-ssr-html-hack similar to the auto detected light/dark themes. It's the same problem, the server doesn't know the real style to use, and whatever the server decides to show will otherwise be visible at least until startClient is called.

lemmy-ui/src/server/utils/create-ssr-html.tsx

Lines 82 to 87 in accf1b2

<script nonce="${cspNonce}">

if (!document.documentElement.hasAttribute("data-bs-theme")) {

const light = window.matchMedia("(prefers-color-scheme: light)").matches;

document.documentElement.setAttribute("data-bs-theme", light ? "light" : "dark");

}

</script>

I tried my idea and it didn't work. I can attempt @matc-pub's suggestion, although I foresee this will cause me to run into the opposite issue: the page flashing as blurred for a second when it shouldn't be. This is because if content_warning is set, the browser's local storage also has to be checked to see if it needs to ask for consent.

Edit: @matc-pub's suggestion would most likely work if I used a cookie instead of local storage. I'll give that an attempt.

I've tried the cookie approach with and without a data attribute. The HTML and CSS that gets returned from the server before client side JS runs still isn't blurred. I think the problem is that bootstrap modals depend on being run in the browser to render. We'll either have to live with a slight delay for when the blur starts or go back to using the regular confirm dialog.

This reverts commit 5197206.

matc-pub · 2024-04-18T11:43:30Z

#2430 is a PR to this PR. (Not sure how this will show up)

The PR reverts the commit with the changes in App.tsx and add does apply the blur analog to data-bs-theme attribute.

src/server/utils/create-ssr-html.tsx

src/shared/components/app/app.tsx

dessalines

LGTM, since @matc-pub helped with this also, let's have them take a look and approve it also.

BTW @matc-pub , would you like to be a maintainer / collaborator for lemmy-ui? LMK and I'll add you.

dessalines · 2024-04-18T23:50:39Z

src/shared/components/app/app.tsx

+            id="app"
+            className="lemmy-site"
+            ref={this.rootRef}
+            data-adult-consent={this.isoData.showAdultConsentModal || null}


Much cleaner.

dessalines · 2024-04-18T23:52:03Z

src/shared/components/common/pictrs-image.tsx

-          })}
-        />
-      </picture>
+      !this.isoData.showAdultConsentModal && (


I tested, and it seems to handle the re-rendering fine.

dessalines · 2024-04-18T23:55:03Z

Oops I forgot to turn off auto-merge, my bad. Still do a look over and maybe another PR if anything's crucial.

SleeplessOne1917 added 2 commits April 11, 2024 22:50

Make confirm popup for adult consent

fff198a

Fix import

d51cf75

SleeplessOne1917 commented Apr 12, 2024

View reviewed changes

SleeplessOne1917 mentioned this pull request Apr 12, 2024

On registration set show_nsfw based on site.content_warning LemmyNet/lemmy#4616

Merged

SleeplessOne1917 added 11 commits April 12, 2024 14:00

Merge branch 'main' into content-warning

588bacb

Fix blur and adjust user settings

b1fc470

Merge branch 'content-warning' of https://github.com/LemmyNet/lemmy-ui …

e98d1c9

…into content-warning

Merge branch 'main' into content-warning

3cae1b5

Make confirmation popup more stylish

0413fd6

Add setting to site settings form

fea5ff1

Fix modal bug

fb38faf

Put adult consent logic all in one place

c430678

Make modal use markdown

4fc425b

Fix consent modal showing up for currently logged in admin

b6d7efd

Add go-back redirect countdown

42bc4ab

SleeplessOne1917 marked this pull request as ready for review April 14, 2024 14:25

Center modal title

9869b00

Handle enable_nsfw correctly

afae55c

dessalines reviewed Apr 16, 2024

View reviewed changes

SleeplessOne1917 added 2 commits April 16, 2024 09:27

Blur background of modal to hide spicy things

1e76395

Add translations

160048c

SleeplessOne1917 enabled auto-merge (squash) April 16, 2024 13:46

SleeplessOne1917 added 2 commits April 16, 2024 13:56

Remove delay between page loading and being blurred

5197206

Merge branch 'main' into content-warning

f97f396

dessalines reviewed Apr 16, 2024

View reviewed changes

SleeplessOne1917 and others added 3 commits April 17, 2024 12:21

Merge branch 'main' into content-warning

bbce909

Revert "Remove delay between page loading and being blurred"

8e5599e

This reverts commit 5197206.

Blur SSR by default when content warning is set

1b4903d

Make blur work correctly

ce72377

matc-pub reviewed Apr 18, 2024

View reviewed changes

src/server/utils/create-ssr-html.tsx Outdated Show resolved Hide resolved

matc-pub reviewed Apr 18, 2024

View reviewed changes

src/shared/components/app/app.tsx Outdated Show resolved Hide resolved

SleeplessOne1917 added 2 commits April 18, 2024 19:28

Prevent images from downloading without consent

3cbe7e1

Autoexpand

d5cfc73

dessalines approved these changes Apr 18, 2024

View reviewed changes

SleeplessOne1917 merged commit 643c1f6 into main Apr 18, 2024
2 checks passed

dessalines requested a review from matc-pub April 18, 2024 23:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make confirm popup for adult consent #2419

Make confirm popup for adult consent #2419

SleeplessOne1917 commented Apr 12, 2024

SleeplessOne1917 Apr 12, 2024

dessalines Apr 12, 2024

dessalines commented Apr 12, 2024

SleeplessOne1917 commented Apr 12, 2024

SleeplessOne1917 commented Apr 14, 2024

Nutomic commented Apr 15, 2024 •

edited

Loading

SleeplessOne1917 commented Apr 15, 2024

Nutomic commented Apr 15, 2024

dessalines left a comment •

edited

Loading

Nutomic commented Apr 16, 2024

SleeplessOne1917 commented Apr 16, 2024

dessalines commented Apr 16, 2024

dessalines left a comment

dessalines Apr 16, 2024

SleeplessOne1917 Apr 16, 2024

dessalines Apr 17, 2024

matc-pub Apr 17, 2024

SleeplessOne1917 Apr 17, 2024 •

edited

Loading

SleeplessOne1917 Apr 18, 2024

matc-pub commented Apr 18, 2024

dessalines left a comment

dessalines Apr 18, 2024

dessalines Apr 18, 2024

dessalines commented Apr 18, 2024

	<script nonce="${cspNonce}">
	if (!document.documentElement.hasAttribute("data-bs-theme")) {
	const light = window.matchMedia("(prefers-color-scheme: light)").matches;
	document.documentElement.setAttribute("data-bs-theme", light ? "light" : "dark");
	}
	</script>

Make confirm popup for adult consent #2419

Make confirm popup for adult consent #2419

Conversation

SleeplessOne1917 commented Apr 12, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dessalines commented Apr 12, 2024

SleeplessOne1917 commented Apr 12, 2024

SleeplessOne1917 commented Apr 14, 2024

Nutomic commented Apr 15, 2024 • edited Loading

SleeplessOne1917 commented Apr 15, 2024

Nutomic commented Apr 15, 2024

dessalines left a comment • edited Loading

Choose a reason for hiding this comment

Nutomic commented Apr 16, 2024

SleeplessOne1917 commented Apr 16, 2024

dessalines commented Apr 16, 2024

dessalines left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SleeplessOne1917 Apr 17, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matc-pub commented Apr 18, 2024

dessalines left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dessalines commented Apr 18, 2024

Nutomic commented Apr 15, 2024 •

edited

Loading

dessalines left a comment •

edited

Loading

SleeplessOne1917 Apr 17, 2024 •

edited

Loading